footer .card {
margin-top: 0px !important;
    
}

.mb-5 {
    margin-bottom: 0rem !important; */
}

.navbar-header
{
    background-color: #0B0B33 !important; /* Donkerblauwe kleur */
    color: #98FF4D;
}

.navbar-nav:first-child {
    background: #ffffff00;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: #fff;
}

/* Knop zonder rand en witte tekst */
.btn.btn-link {
    border: none; /* Geen rand */
    color: white; /* Witte tekstkleur */
    border-radius: 0 1.375rem 0 1.375rem !important;
}


/* Aanpassing voor de 'outline-primary' knoppen */
.btn-outline-primary {
    color: #fff !important; /* Witte tekstkleur */
    border-color: #98FF4D !important; /* Groene randkleur */
    background-color: #98FF4D !important; /* Groene achtergrondkleur */
    border-radius: 0 1.375rem 0 1.375rem !important;
}

/* Stijl voor login knoppen */
#loginPlatformChoice .btn {
    background-color: #98FF4D !important; /* Groene achtergrond */
    color: #fff !important; /* Witte tekst */
    border: 2px solid #98FF4D !important; /* Groene rand */
    border-radius: 0 1.375rem 0 1.375rem !important;
}

/* Specifieke stijl voor een bepaalde login knop */
#loginPlatformChoice #loginWithPlatformButton {
    background-color: #98FF4D !important; /* Groene achtergrond */
    color: #fff; /* Witte tekst */
    border: 2px solid #98FF4D !important; /* Groene rand */
    border-radius: 0 1.375rem 0 1.375rem !important;
}

/* Stijl voor cast-icoon */
.jw-icon-cast {
    display: flex !important; /* Zorg ervoor dat het zichtbaar is */
    cursor: pointer; /* Zet de cursor op pointer */
    color: #98FF4D; /* Groene kleur voor icoon */
}

/* Zorg ervoor dat het Google Cast-element zichtbaar is */
google-cast-launcher {
    display: flex !important;
}

/* Aanpassing voor Google Cast status en state kleuren */
.cast_caf_status_d, .cast_caf_state_h {
    fill: #fff; /* Witte vulling */
    stroke: #fff; /* Witte randen */
}

/* Standaard stijl voor primaire knoppen */
.btn.btn-primary {
    background-color: #98FF4D; /* Groene achtergrondkleur */
    border-color: #98FF4D; /* Groene randkleur */
    color: white; /* Witte tekstkleur */
     border-radius: 0 1.375rem 0 1.375rem !important;
}

/* Maak het play-icoon in de knop wit */
.btn.btn-primary i.fa-play {
    color: white;
}

/* Kleurverandering voor het play-icoon bij hover */
.btn.btn-primary:hover i.fa-play {
    color: #98FF4D;
}

/* SVG pad kleur aanpassing naar wit */
.btn.btn-link svg path {
    fill: white; /* Vul de kleur van het pictogram */
}

/* Zorgt ervoor dat de asset-description zichtbaar blijft */
.metoorsprong .asset-description {
    visibility: visible !important;
}

/* Hover- en focus-effecten voor link-knoppen */
.btn.btn-link:hover, 
.btn.btn-link:focus {
    background-color: #98FF4D; /* Groene achtergrond bij hover/focus */
    text-decoration: none; /* Verwijder onderstreping */
     border-radius: 0 1.375rem 0 1.375rem !important;
}

/* Overlay-effect voor visuele achtergrondintroductie */
.intro-visual-bg-overlay:after {
    content: ''; /* Pseudo-element voor overlay */
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
   /*  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 25%, #C2C2C2 100%);
    */
    z-index: 0; /* Plaats onder content */
}

/* Video achtergrondaanpassingen voor kleinere schermen */
@media (max-width: 768px) {
    .video-background {
        background-size: cover;
        background-position: center;
        height: 80vh;
        padding: 0;
        max-height: 350px;
    }
}

/* Tekstkleur aanpassing voor koppen */
h1 {
    color: #000; /* Zwarte tekstkleur */
}

/* Tekstkleur voor footer paragraaf */
footer p {
    color: #fff !important; /* Donkerblauwe kleur */
}

/* Pas de padding van .py-5 aan */
.py-5 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}


/* Verwijder witte achtergrond van advertenties */
.no-white-bg .card, 
.no-white-bg .bg-white {
    background: none !important;
    border: none;
    box-shadow: none !important;
}

/* Verberg grijze tekst van advertenties */
.no-white-bg .text-muted {
    color: transparent !important;
}

/* Verwijder schaduw van kleine kaarten */
.no-white-bg .shadow-sm {
    box-shadow: none !important;
}

/* Styling voor advertentie-afbeeldingen */
.advertisements .img-fluid {
    border-radius: 6px;
    pointer-events: auto; /* Klikbaarheid behouden */
}

/* Basis styling voor de header */
.header_content {
    height: 140px;
    background-color: #05193D;
    color: #fff;
    font-family: Verdana, sans-serif;
    font-size: 16px;
    line-height: 28px;
    box-sizing: border-box;
}

/* Tekstkleur voor gedempte tekst */
.text-muted {
    color: #98FF4D !important;
}

/* Logo styling */
.logo {
    position: relative;
    display: block;
}

/* Responsieve container breedtes */
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 1200px) {
  .row > .col-md-3 {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

}


/* Standaard reset voor box-sizing */
*, ::after, ::before {
    box-sizing: border-box;
}

/* Verberg elementen op kleine schermen */
.hidden-xs, .hidden-sm {
    display: none !important;
}

@media (min-width: 768px) {
    .hidden-xs, .hidden-sm {
        display: block !important;
    }
}

.menuItem:hover .bigMenu {
    display: block;
}

/* Groene tekstkleur voor lichte tekst */
.text-light {
    color: #98FF4D !important;
}

/* Kaarten met groene tekst */
.card {
    color: #98FF4D !important;
}

/* Donkere achtergrondkleur */
.bg-dark {
    background-color: #98FF4D !important;
}

/* Slider knoppen styling */
.glide div[data-glide-el="controls"] .slider-btn {
    font-size: 20px;
    padding: 15px;
    background-color: rgba(0,0,0,.7);
}

.glide div[data-glide-el="controls"] .slider-btn-next {
    border-radius: 10px 0 0 10px;
}

.glide div[data-glide-el="controls"] .slider-btn-prev {
    border-radius: 0 10px 10px 0;
}

/* Verberg titels van kaarten zonder afbeelding */
.no-image-title .card-header {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
}

/* Kleurinstellingen binnen modals */
.modal h1,
.modal .fw-bold,
.modal #video_description,
.modal .Gf .asset-title,
.modal .Gf .asset-description {
    color: inherit !important;
}

/* Asset beschrijving zichtbaar en wit maken */
.asset-description {
    white-space: normal;
    overflow: visible;
    z-index: 10;
    position: relative;
    height: auto;
    color: #fff;
}

.no-white-bg .card, 
.no-white-bg .bg-white {
    background: none !important;
    border: none;
    box-shadow: none !important;
}
.no-white-bg .text-muted {
    color: #FFF !important;
}
.no-white-bg .shadow-sm {
    box-shadow: none !important;
}
.advertisements .img-fluid {border-radius: 6px;}

.no-image-title .card-header {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
}

/* Pas de breedte alleen aan voor col-12 col-md-6 binnen intro-visual-bg */
.intro-visual-bg .col-12.col-md-6 {
    width: 75% !important; /* Alleen van toepassing binnen .intro-visual-bg */
}

/* Stijl voor h1 binnen intro-visual-bg */
.intro-visual-bg h1 {
    color: #fff;
    font-size: 2.5rem;
}

.intro-visual-bg .lead {
    /* line-height: 1.2; */
    visibility: hidden;
}

/* Verberg alleen de .btn.btn-primary binnen .intro-visual-bg */
.intro-visual-bg .btn.btn-primary {
    background-color: #98FF4D;
    border-color: #98FF4D;
    visibility: hidden;  /* Verbergt de button maar behoudt de ruimte */
    color: white;
}

.no-white-bg .text-muted {
    color: #000000 !important;
}

.shadow{
    box-shadow:0 0rem 0rem !important; 
}

.jump-border{
    border-radius: 25px;
}

.no-white-bg .card, 
.no-white-bg .bg-white {
    background: none !important;
    border: none;
    box-shadow: none !important;
}
.no-white-bg .text-muted {
    color: #FFF !important;
}
.no-white-bg .shadow-sm {
    box-shadow: none !important;
}

/* === Navbar Toggler Knop (Hamburger) === */
.navbar-toggler {
    background-color: transparent; /* Verwijder achtergrondkleur */
    border: none; /* Geen rand rondom knop */
}

/* === Aangepast hamburger icoon (3 blauwe lijnen) === */
.navbar-toggler-icon {
    background-image: none; /* Verwijder standaard Bootstrap icoon */
    display: inline-block;
    width: 30px; /* Breedte van de hamburgerlijn */
    height: 3px; /* Dikte van de lijn */
    background-color: #98FF4D; /* Blauwe kleur van de eerste lijn */
    box-shadow: 
        0 6px 0 #98FF4D,    /* Tweede lijn 6px onder eerste */
        0 12px 0 #98FF4D;   /* Derde lijn 12px onder eerste */
}

@media (max-width: 767px) {
    .navbar-nav {
        background: #ff0b0b00;
}

/* === Navigatielinks: standaard geen onderstreping === */
.navbar-nav .nav-item a {
    text-decoration: none;
    transition: text-decoration 0.2s ease; /* Soepele animatie */
}

/* === Hover-effect: onderstreping + oranje kleur === */
.navbar-nav .nav-item a:hover {
    text-decoration: underline;
    color: #98FF4D !important; /* Oranje hoverkleur */
}


/* === Navbar layout algemeen === */
.navbar {
    display: flex; /* Horizontale layout */
    align-items: center; /* Verticaal centreren */
    justify-content: space-between; /* Spatie tussen linker/rechterzijde */
    padding: 10px 0; /* Verticale ruimte */
    color: #fff;
    
}

/* Zorg dat de container binnen de navbar geen achtergrond overneemt */
.navbar .container {
    background-color: transparent;
}

/* === Eerste navigatielijst transparant maken === */
.navbar-nav:first-child {
    background-color: transparent; /* Volledig transparant */
}


/* === Hoofdmenu styling (extra menu, bijv. bovenin) === */
.navbar .main-nav {
    list-style: none; /* Geen bullets */
    margin: 0;
    padding: 0;
    display: flex; /* Menu-items naast elkaar */
}

.navbar .main-nav li {
    margin-right: 20px; /* Ruimte tussen menu-items */
}

.navbar .main-nav li a {
    text-decoration: none;
    color: #98FF4D; /* Oranje kleur */
    font-weight: 400;
}

.navbar .main-nav li a:hover {
    color: #98FF4D; /* Geen kleurverandering bij hover – optioneel aanpassen */
}


/* === Dropdown-menu stijl === */
.navbar-nav .dropdown-menu {
    position: static; /* Zet het dropdown-menu vast op zijn plek */
    background-color: #98FF4D; /* Oranje achtergrond */
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: #fff;
}

@media (max-width: 576px) {
  .no-white-bg.center-items.no-image-title.smallmobile {
    max-width: 300px;
    width: 100%;
    margin: 0 auto; /* optioneel, centreert het element */
  }
}